<template>
  <view class="admin-page">
    <view class="page-header">
      <text class="title">文档管理员设置</text>
      <button class="back-btn" @click="navigateBack">返回</button>
    </view>

    <view class="admin-container">
      <!-- 管理员列表 -->
      <view class="admin-list">
        <view class="list-header">
          <text>当前管理员（最多3人）</text>
        </view>
        
        <view class="admin-item" v-for="(admin, index) in adminList" :key="index">
          <text class="user-id">{{ admin.userid }}</text>
          <button class="delete-btn" @click="deleteAdmin(admin.userid)">删除</button>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="adminList.length === 0 && !loading">
          <text>暂无管理员</text>
        </view>
      </view>

      <!-- 添加管理员区域 -->
      <view class="add-admin-section">
        <input 
          type="text" 
          v-model="newAdminId" 
          placeholder="请输入用户ID"
          class="admin-input"
        >
        <button 
          class="add-btn" 
          @click="addAdmin"
          :disabled="adminList.length >= 3 || !newAdminId"
        >
          添加管理员
        </button>
        <text class="tips" v-if="adminList.length >= 3">
          已达到最大管理员数量（3人）
        </text>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="loading">
        <loading></loading>
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      docId: '', // 文档ID
      adminList: [], // 管理员列表
      newAdminId: '', // 新管理员ID
      loading: false // 加载状态
    };
  },
  onLoad(options) {
    // 获取文档ID
    this.docId = options.docId;
    // 加载管理员列表
    this.getAdminList();
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 获取管理员列表
    getAdminList() {
      this.loading = true;
      uni.request({
        url: `http://ziyan.xshhotels.cn:8981/api/QYWXDocument/GetDocAuth?Id=${this.docId}`,
        method: 'GET',
        success: (res) => {
          this.loading = false;
          if (res.data.success) {
            this.adminList = res.data.data || [];
          } else {
            uni.showToast({
              title: res.data.msg || '获取管理员失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          this.loading = false;
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        }
      });
    },

    // 添加管理员 - 提交所有管理员ID（包括现有和新增）
    addAdmin() {
      if (!this.newAdminId.trim()) {
        uni.showToast({
          title: '请输入用户ID',
          icon: 'none'
        });
        return;
      }

      // 检查是否已存在
      const exists = this.adminList.some(item => item.userid === this.newAdminId.trim());
      if (exists) {
        uni.showToast({
          title: '该用户已是管理员',
          icon: 'none'
        });
        return;
      }

      // 检查是否超过最大数量
      if (this.adminList.length >= 3) {
        uni.showToast({
          title: '最多只能添加3个管理员',
          icon: 'none'
        });
        return;
      }

      this.loading = true;
      
      // 构建所有管理员ID数组（现有管理员 + 新增管理员）
      const allUserIds = [
        ...this.adminList.map(admin => admin.userid),
        this.newAdminId.trim()
      ];
      
      // 转换为接口要求的格式
      const params = {
        doc_id: this.docId,
        ids: allUserIds.map(id => ({ id }))
      };

      uni.request({
        url: 'http://ziyan.xshhotels.cn:8981/api/QYWXDocument/AddAdmin',
        method: 'POST',
        data: params,
        success: (res) => {
          this.loading = false;
          if (res.data.success) {
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            });
            this.newAdminId = '';
            this.getAdminList(); // 重新加载列表
          } else {
            uni.showToast({
              title: res.data.msg || '添加失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          this.loading = false;
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        }
      });
    },

    // 删除管理员 - 只提交要删除的那个ID
    deleteAdmin(userId) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除管理员 ${userId} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            // 只包含要删除的ID
            const params = {
              doc_id: this.docId,
              ids: [{ id: userId }]
            };

            uni.request({
              url: 'http://ziyan.xshhotels.cn:8981/api/QYWXDocument/DeleteAdmin',
              method: 'POST',
              data: params,
              success: (res) => {
                this.loading = false;
                if (res.data.success) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'none'
                  });
                  this.getAdminList(); // 重新加载列表
                } else {
                  uni.showToast({
                    title: res.data.msg || '删除失败',
                    icon: 'none'
                  });
                }
              },
              fail: () => {
                this.loading = false;
                uni.showToast({
                  title: '网络错误，请重试',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 样式与之前相同，此处省略 */
.admin-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.back-btn {
  padding: 8px 16px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 4px;
}

.admin-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.list-header {
  font-size: 16px;
  margin-bottom: 15px;
  color: #666;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.user-id {
  font-size: 14px;
  color: #333;
}

.delete-btn {
  padding: 4px 12px;
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 4px;
  font-size: 12px;
}

.add-admin-section {
  margin-top: 30px;
}

.admin-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
}

.add-btn {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
}

.add-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.tips {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 8px;
  display: inline-block;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  color: #666;
}
</style>